

// --------------------------切换两个盒子---------------------------
$('.box a').on('click', function () {
  // $(this)表示 a
  $(this).parents('.box').hide().siblings('.box').show()
})


// --------------------------注册功能---------------------------
// 表单提交事件  --> 阻止默认行为  --> 收集数据  -->Ajax提交
$('.register form').on('submit', function (e) {
  // 阻止默认行为
  e.preventDefault()
  // serialize() 元素必须带有name值 收集表单数据的时候  一定要检查input 的name属性值，是否和接口要求的参数名一致
  let data = $(this).serialize()
  $.ajax({
    type: 'POST',
    url: '/api/reguser',
    data: data,
    success: function (res) {
      layer.msg(res.message)
      if (res.status === 0) {
        // 清空表单
        $('.register form')[0].reset();
        // 切换页面
        $('.login').show().siblings('.box').hide()
      }
    }


  })
})

// --------------------------自定义验证规则---------------------------
// 1.加载form 模块(let 变量 = layui.模块名)
let form = layui.form
// 2.调用 form.verify()方法扩展自己的验证规则
form.verify({
  // 键(规则名称) : 值(验证的方法)
  // 值(验证的办法, 有两种写法, 一种是数组, 一种是函数)
  // 1.数组的写法
  // 规则名称: ['正则表达式', '验证不通过时候的提示']
  user: [/^\w{2,10}$/, '用户名必须是2-10位'], //\w表示数字字母下划线
  pass: [/^\S{6,12}$/, '密码必须是6-12位'], //\S是非空白
  // 2.函数的写法
  same: function (abc) {
    // 形参abc 表示使用该验证规则的输入框的值 : (案例中确认密码使用了这个验证规则,所以形参表示确认密码的值)
    // return 的值验证不通过时的提示
    if ($('.pwd').val() !== abc) {
      return '两次密码不一致'
    }
  }
})


// -------------------------登录界面-----------------------------
// 表单提交事件  -->阻止默认行为 --> 收集数据 -->Ajax提交
$('.login form').on('submit', function (e) {
  e.preventDefault()
  $.ajax({
    type: 'POST',
    url: '/api/login',
    data: $(this).serialize(),
    success: function (res) {
      layer.msg(res.message, {
        time: 1000 //2秒关闭（如果不配置，默认是3秒）
      }, function () {
        //do something
        // window.open('./index.html')  //新页面打开
        localStorage.setItem('token', res.token)
        location.href = './index.html' //本页面打开
      })
    }
  })
})